<template>
  <div class="comment_textarea" @click.stop="isCommentClick()">
    <div class="edit">
      <div class="textarea-wrapper">
        <p class="content">{{value}}</p>
        <textarea
          ref="textarea"
          v-model="value"
          @input="changeInput($event)"
          :placeholder="placeholder"
          @blur="inputBlur"
          @click.stop="textareaClick()"
          @focus="textareaFocus()"
        ></textarea>
      </div>
      <!-- <span class="paste"></span> -->
      <span :class="isEmojiPicker?'keyboard':'emot'" @click.stop="emot()" @mousedown.stop.prevent></span>
      <button class="sent" :class="{'sentTure':value}" @click.stop="sent()">发送</button>
    </div>
    <VEmojiPicker v-show="isEmojiPicker" :pack="pack" @select="selectEmoji" />
  </div>
</template>
<script>
import VEmojiPicker from "v-emoji-picker";
import packData from "v-emoji-picker/data/emojis.json";
import { mapState } from "vuex";
export default {
  components: {
    VEmojiPicker
  },
  data() {
    return {
      pack: packData.data,
      isEmojiPicker: false,
      value: "", //输入中的文字
      isComment: false
    };
  },
  computed: {
    ...mapState("song_detail", ["song_detail_data"]),
    ...mapState("comment", ["t", "commentId", "placeholder"])
  },
  created() {
    this.refresh();
  },
  methods: {
    sent() {
      if (!this.isComment) {
        document.activeElement.blur();
        this.$router.push({ name: "LoginSelect" });
      } else {
        if (this.value) {
          this.$store
            .dispatch("comment/getComment", {
              t: this.t,
              type: 0,
              id: this.song_detail_data.songs[0].id,
              content: this.value,
              commentId: this.commentId
            })
            .then(data => {
              this.value = "";
            });
        }
      }
    },
    isCommentClick() {
      if (!this.isComment) {
        this.$router.push({ name: "LoginSelect" });
      }
    },
    textareaFocus() {
      if (this.isEmojiPicker) {
        document.activeElement.blur();
        window.scrollTo(0, 0);
      }
    },
    textareaClick() {
      if (!this.isComment) {
        document.activeElement.blur();
        this.$router.push({ name: "LoginSelect" });
      } else {
        if (this.isEmojiPicker) {
          this.isEmojiPicker = false;
          this.$refs.textarea.focus();
        }
      }
    },
    inputBlur() {
      if (!this.value) {
        if (this.t == 2) {
          this.$store.commit("comment/setT", 1);
          this.$store.commit("comment/setCommentId", "");
          this.$store.commit(
            "comment/setPlaceholder",
            "说点什么吧，也许Ta都听的到"
          );
        }
      }
      if (!this.isEmojiPicker) {
        window.scrollTo(0, 0);
      }
    },
    selectEmoji(emoji) {
      var elInput = this.$refs.textarea; //根据id选择器选中对象
      var startPos = elInput.selectionStart; // input 第0个字符到选中的字符
      var endPos = elInput.selectionEnd; // 选中的字符到最后的字符

      if (startPos === undefined || endPos === undefined) return;
      var txt = elInput.value;
      // 将表情添加到选中的光标位置
      var result =
        txt.substring(0, startPos) + emoji.emoji + txt.substring(endPos);
      elInput.value = result; // 赋值给input的value
      // 重新定义光标位置
      elInput.focus();
      elInput.selectionStart = startPos + emoji.emoji.length;
      elInput.selectionEnd = startPos + emoji.emoji.length;
      this.value = result; // 赋值给表单中的的字段
    },
    emot() {
      if (!this.isComment) {
        document.activeElement.blur();
        this.$router.push({ name: "LoginSelect" });
      } else {
        this.isEmojiPicker = !this.isEmojiPicker;
        if (this.isEmojiPicker) {
          document.activeElement.blur();
          window.scrollTo(0, 0);
        } else {
          this.$refs.textarea.focus();
        }
      }
    },
    changeInput($event) {
      this.value = $event.target.value;
    },
    refresh() {
      this.$store.dispatch("login_refresh/getLoginRefreshData", {}).then(
        data => {
          this.$store.dispatch("login_status/getLoginStatusData", {}).then(
            data => {
              this.isComment = true;
            },
            data => {
              this.isComment = false;
            }
          );
        },
        data => {
          this.isComment = false;
        }
      );
    }
  }
};
</script>
<style lang="scss">
#EmojiPicker {
  width: 100%;
  #InputSearch {
    display: none;
  }
  #Emojis {
    .container-emoji {
      height: 2.5rem;
    }
  }
}
</style>
<style lang="scss" scoped>
.comment_textarea {
  border-top: 0.02rem solid #eee;
  overflow: hidden;
  .edit {
    text-align: left;
    min-height: 0.4rem;
    padding: 0.3rem 0.2rem;
    .textarea-wrapper {
      width: 5.2rem;
      border: 0;
      background-color: transparent;
      color: #ccc;
      font-size: 0.3rem;
      position: relative;
      min-height: 0.4rem;
      overflow: hidden;
      max-height: 1.2rem;
      display: inline-block;
      vertical-align: middle;
      .content {
        display: block;
        visibility: hidden;
        font-size: 0.3rem;
        line-height: 0.4rem;
        word-wrap: break-word;
        color: #555;
        padding: 0;
        margin: 0;
      }
      textarea {
        overflow-y: auto;
        overflow-x: hidden;
        resize: none;
        width: 100%;
        height: 100%;
        border: 0;
        font-size: 0.3rem;
        line-height: 0.4rem;
        color: #555;
        position: absolute;
        left: 0;
        top: 0;
      }
    }
    span {
      display: inline-block;
      vertical-align: middle;
    }
    span.paste {
      background: url(../images/com.png) no-repeat;
      background-size: 100% 100%;
      width: 0.5rem;
      height: 0.5rem;
      visibility: hidden;
      margin-left: 0.4rem;
    }
    span.emot {
      background: url(../images/b8d.png) no-repeat;
      background-size: 100% 100%;
      width: 0.5rem;
      height: 0.5rem;
      margin: 0 0.2rem;
    }
    span.keyboard {
      background: url(../images/b8e.png) no-repeat;
      background-size: 100% 100%;
      width: 0.5rem;
      height: 0.5rem;
      margin: 0 0.2rem;
    }
    button.sent {
      display: inline-block;
      vertical-align: middle;
      background: transparent;
      border: 0;
      color: #ccc;
      font-size: 0.34rem;
      margin: 0;
      padding: 0;
    }
    button.sentTure {
      color: #555;
    }
  }
}
</style>